// 3s 以内 把宽度 从100px  变为 640px 及增加 540px
//  60 帧每秒  3s 180 帧 ，每次增加 3px
const div1 = $("#div1");
const div2 = $("#div2");
const div3 = $("#div3");
let curWidth = 100;
const maxWidth = 640;

function animate(el, width = 3) {
  console.log("帧", el.text(), 60 / width / 3);
  curWidth = curWidth + width;
  el.css("width", curWidth);
  if (curWidth < maxWidth) {
    setTimeout(() => animate(el, width), 16.7 * (width / 3));
  }
}

// animate(div1);
// animate(div2, 9);
// animate(div3, 18);

// 使用 RAF
function animate2() {
  curWidth = curWidth + 3;
  div1.css("width", curWidth);
  if (curWidth < maxWidth) {
    window.requestAnimationFrame(animate2);
  }
}
animate2();
